page{
    background-color: #edece8;
}
.topbox {
    height: 45vh;
    overflow: hidden;
    background-color: var(--themColor);
    position: relative;
    .bg_wrap {
        position: relative;
      .user_bg {
        image {
            width: 110%;
            height: 50vh;
            filter: blur(10rpx);
        }
      }
      .user_info {
          position: absolute;
          top: 20%;
          left: 50%;
          transform: translateX(-50%);
          text-align: center;
        .user_icon {
          image {
            width: 150rpx;
            height: 150rpx;
            border-radius: 50%;
            border: 2rpx solid var(--themColor);
          }
        }
        .user_name {
            font-size:38rpx;
            font-weight: 400;
            margin-top: 40rpx;
            color: #fff;
        }
      }
    }
    navigator{
        position: absolute;
        top: 30%;
        left: 50%;
        transform: translateX(-50%);
        padding: 30rpx;
        border: 2rpx solid skyblue;
        border-radius: 10rpx;
        color: #fff;
        font-size: 38rpx ;
    }
  }

.user-content{
  position: relative;
  .main{
    color: #666;
    padding-bottom: 100rpx;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    top: -40rpx;
    font-size: 24rpx;
    .history{
      display: flex;
      justify-content: space-around;
      background-color: #fff;
      padding: 10rpx;
      .history-item{
        navigator{
          display: flex;
          justify-content: center;
          align-items: center;
          flex-direction: column;
          .history-num{
            color: var(--themColor);
          }
        }
      }
    }
    .order{
      margin-top: 20rpx;
      background-color: #fff;
      .order_title{
        padding: 10rpx;
        font-size: 26rpx;
        border-bottom: 2rpx solid #ccc;
      }
      .order_main{
        display: flex;
        justify-content: space-around;
        align-items: center;
        padding: 10rpx 0;
        .order-item{
          display: flex;
          justify-content: center;
          flex-direction: column;
          align-items: center;
          .iconfont{
            color: var(--themColor);
          }
          .icon-ding_dan{
            font-size: 28rpx;
          }
          .icon-fukuantongzhi{
            font-size: 32rpx;
            font-weight: 400;
          }
          .icon-receipt-address{
            font-size: 32rpx;
            font-weight: 500;
          }
          .icon-tuihuotuikuan_dianpu{
            font-size: 40rpx;
          }
        }
      }
    }
    .shouhuo{
      background-color: #fff;
      margin-top: 20rpx;
      padding: 15rpx;
      font-size: 26rpx;
    }
    .app_info_wrap{
      margin-top: 20rpx;
      background-color: #fff;
      .app_info_item{
        font-size: 26rpx;
        padding: 15rpx;
        border-bottom: 2rpx solid #ccc;
      }
      .app_info_contact{
        display: flex;
        justify-content: space-between;
      }
    }
    .recommend_wrap{
      margin-top: 20rpx;
      background-color: #fff;
      padding: 15rpx;
    }
  }
}